<template>
  <div>
    <el-row>
      <el-col :span="16" >
        <el-card style="width: 820px; ">
          <el-row>
            <el-col>
            <span style=" font-size: 17px; font-weight: bold;" >商家介绍</span>
            </el-col>
            </el-row>
          <el-row>
            <el-col>
              <span style="font-size: 15px;">{{store.storeIntro}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-image v-for="u in store.urls"
                  style="width: 100px; height: 100px; margin: 10px;"
                  :src="u"
                  :fit="fit">
            </el-image>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <span class="intro-font">地址：{{store.address}}</span>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <span class="intro-font">电话：{{store.phone}}</span>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <span class="intro-font">配送服务：{{store.dispatching}}</span>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <span class="intro-font">配送时间：{{store.startTime}} - {{store.endTime}}</span>
          </el-row>
        </el-card>
        <el-card style="width: 820px; margin-top: 20px">
          <span>餐厅资质</span>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">
              <span>营业执照</span><br/>
              <el-image
                style="width: 300px; height: 250px; margin-right: 10px;"
                :src="store.license"
                :fit="fit">
              </el-image>
            </el-col>
            <el-col :span="12">
              <span>餐饮服务许可证</span><br/>
              <el-image
                style="width: 300px; height: 250px; margin-right: 10px;"
                :src="store.permit"
                :fit="fit">
              </el-image>
            </el-col>
          </el-row>
        </el-card>
      </el-col>


      <el-col :span="7" style="margin-left: 40px;" >
        <el-card :body-style="{ padding: '10px' }"  style="width: 355px; margin-top: 10px;">
          <el-row >
            <el-col :span="24" >
              <el-row style="margin-top: 10px; margin-left: 10px;">
                 <span style=" font-size: 17px; font-weight: bold; " >商家公告</span>
              </el-row>
              <el-divider></el-divider>
              <el-row style="margin-left: 10px;">
                <el-col>
                <span style="font-size: 15px; color: gray;">{{store.affiche}}</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  export default {
    name:"StoreInfo",
    data(){
      return{
        store:{
        }
      }
    },
    methods:{
      getInfo() {
        this.$http.get("/storeInfo/Info", {
          params: {
            id: this.$route.query.id
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.store = resp.data.data;
          }
        })
      }
    },
    mounted() {
      this.getInfo();
    }
  }
</script>

<style scoped>
.intro-font {
  font-size: 15px;
}
</style>
